<template>
  <div class="stats-panel">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon">
            <el-icon><Collection /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-value">{{ stats.totalRooms || 0 }}</div>
            <div class="stats-label">会议室总数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon free">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-value">{{ stats.freeRooms || 0 }}</div>
            <div class="stats-label">空闲会议室</div>
            <div class="stats-percent" v-if="stats.totalRooms">{{ Math.round((stats.freeRooms / stats.totalRooms) * 100) }}%</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon busy">
            <el-icon><VideoPlay /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-value">{{ stats.inUseRooms || 0 }}</div>
            <div class="stats-label">使用中会议室</div>
            <div class="stats-percent" v-if="stats.totalRooms">{{ Math.round((stats.inUseRooms / stats.totalRooms) * 100) }}%</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon booked">
            <el-icon><Calendar /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-value">{{ stats.bookingsToday || 0 }}</div>
            <div class="stats-label">今日会议数</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Calendar, Check, Collection, VideoPlay } from '@element-plus/icons-vue'

// 统计数据接口
interface StatsData {
  totalRooms: number
  freeRooms: number
  inUseRooms: number
  bookingsToday: number
  [key: string]: number
}

// 组件属性定义
const props = defineProps<{
  stats: StatsData
}>()
</script>

<style scoped>
.stats-panel {
  margin-bottom: 20px;
}

.stats-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  height: 100%;
  min-height: 100px;
}

.stats-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #409eff;
  margin-right: 16px;
  color: #fff;
  font-size: 24px;
}

.stats-icon.free {
  background-color: #67c23a;
}

.stats-icon.busy {
  background-color: #f56c6c;
}

.stats-icon.booked {
  background-color: #e6a23c;
}

.stats-content {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.stats-label {
  font-size: 14px;
  color: #606266;
  margin-top: 4px;
}

.stats-percent {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .stats-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .stats-value {
    font-size: 24px;
  }
}
</style>
